<template>
 <div class="ChildDetail">
     <nav-bar>
     <div slot="left" class="left" @click="backClick">
         <img src="@/assets/img/common/back.svg" alt="">
     </div>  
         <div slot="center" class="title">
         <div v-for="(item, index) in titles" :key="item" class="title-item" :class="{active:currentIndex}" @click="titleClick(index)">{{item}}</div>
         </div></nav-bar>
 </div>
</template>

<script>
    import NavBar from '@/components/common/navbar/NavBar'

 export default {
     components: {
         NavBar
     },
   data () {
     return {
         titles: ['商品', '参数', '评论', '推荐'],
         currentIndex: 0
     }
   },
   created() {

   },
   methods: {
       titleClick(index) {
           this.currentIndex = index
           this.$emit('titleClick', index)
       },
    backClick() {
        this.$router.go(-1)
    }   
   }
 }
</script>

<style scoped>
    .title {
        display: flex;

        font: 14px;
    }
    .title-item {
        flex: 1;
    }
    .active {
        color: tomato;
    }
    .left img {
        margin-top: 10px;
    }

</style>
